<!--环保提升项目完成情况汇总表 RptInvestment-->
<template>
  <Layout>
    <div v-if="statisticPage">
      <Form ref="form1" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
        <Row class="query-form">
          <Col span="8">
            <FormItem label='二级集团：' prop='belongOrgId'>
              <Select class='query-form-el' v-model='dataToQuery.belongOrgId' label-in-value @on-change="belongChange">
                <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="企业名称：" prop="companyName">
              <Input v-model='dataToQuery.companyName' class="query-form-el"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
            <Button @click="reset" class="ivu-btn-reset">重置</Button>
            <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
          </Col>
        </Row>
        <Row class="query-form">
          <Col span="24">
            <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div v-else>
      <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
        <Row class="query-form">
          <Col span="8">
            <FormItem label='二级集团：' prop='belongOrgId'>
              <Select class='query-form-el' v-model='dataToQuery.belongOrgId' label-in-value @on-change="belongChange">
                <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label='年度：' prop='yearDate'>
              <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' :clearable="false"
                          type="year"></DatePicker>
            </FormItem>
          </Col>
          <Col span="8" v-if="!switchFlag" >
            <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
            <Button @click="reset" class="ivu-btn-reset">重置</Button>
            <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
          </Col>
          <Col span="8" v-else>
            <FormItem label="单位名称：" prop="companyId">
              <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                            :currentOrgId="dataToQuery.companyId"
                            :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
            </FormItem>
          </Col>
        </Row>
        <Row v-show="switchFlag" class="query-form">
          <Col span="8">
            <FormItem label="项目名称：" prop="projectName">
              <Input v-model='dataToQuery.projectName' class="query-form-el"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="项目类型：" prop="projectCateArrays">
              <Select class='query-form-el' placeholder="请选择项目分类" type='text' v-model='dataToQuery.projectCateArrays'
                      multiple>
                <Option v-for="item in dictMap['EI-000001']" :value="item.codingCodeId" :key="item.codingCodeId">
                  {{ item.codingName }}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label='是否计划内：' prop="isPlan">
              <Select class='query-form-el' placeholder="请选择项目分类" type='text' v-model='dataToQuery.isPlan'>
                <Option value="计划内">计划内</Option>
                <Option value="计划外">计划外</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row v-show="switchFlag" class="query-form">
          <Col span="8" offset="16">
            <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
            <Button @click="reset" class="ivu-btn-reset">重置</Button>
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
          </Col>
        </Row>
        <Row class="query-form">
          <Col span="24">
            <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
            <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportForm">导出</Button>
            <Button size="large" class="ivu-btn-add" icon="md-arrow-back"  @click="goback">返回</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
           :loading='pageStatus.loading'
           border :columns="statisticPage?columns2:columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal :title="getModalTitle('本年度环保提升项目完成情况')" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow" :width=800 :styles="{height:'620px'}" class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"
                :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='单位名称：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName"
                                :orgTree="true" :currentOrgId="dataToView.companyId"
                                :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='年度：' prop='rptPeroid'>
                  <div v-if="mode === 'view'">{{ dataToView.rptPeroid }}</div>
                  <Input v-else class='' placeholder="请选择年度" type='text' readonly v-model='dataToView.rptPeroid'></Input>
                  <!--<DatePicker v-else class="w" placeholder="请选择年度" v-model='dataToView.rptPeroidDate' type="year"-->
                              <!--:options="{disabledDate(date) {return date && date.valueOf() > new Date();}}"></DatePicker>-->
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="项目类型：" prop="projectCategory">
                  <div v-if="mode === 'view'">
                    {{ this.dictMap['EI-000001'] && this.dictMap['EI-000001'][dataToView.projectCategory] && this.dictMap['EI-000001'][dataToView.projectCategory].codingName }}
                  </div>
                  <Select v-else class='w' placeholder="请选择项目分类" type='text' v-model='dataToView.projectCategory'>
                    <Option v-for="item in dictMap['EI-000001']" :value="item.codingCodeId" :key="item.codingCodeId">
                      {{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='是否计划内：' >
                  <RadioGroup v-model="dataToView.isPlan">
                    <Radio label="计划内"></Radio>
                    <Radio label="计划外"></Radio>
                  </RadioGroup>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='项目名称：' prop='projectName'>
                  <div v-if="mode === 'view'">{{ dataToView.projectName }}</div>
                  <div v-else>
                    <Input v-if="dataToView.isPlan ==='计划内'" class='query-form-el' placeholder="请选择方案名称" type='text'
                           v-model='dataToView.projectName' @on-focus="onFocus" readonly  suffix="ios-search"></Input>
                    <Input v-else class='' placeholder="请填写项目名称" type='text' v-model='dataToView.projectName'></Input>
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='项目基本内容：' prop='content'>
                  <div v-if="mode === 'view'">{{ dataToView.content }}</div>
                  <Input v-else class='w' :disabled="dataToView.isPlan ==='计划内'" placeholder="请填写项目基本内容" type='textarea' v-model='dataToView.content'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg" v-if="dataToView.isPlan ==='计划内'">
              <Col span="11">
                <FormItem label='计划投资金额（万元）：'>
                  <div v-if="mode === 'view'">{{ dataToView.investmentMoneyPlan }}</div>
                  <Input v-else class='w' disabled placeholder="" type='text' v-model='dataToView.investmentMoneyPlan'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='预计完成时间：'>
                  <div v-if="mode === 'view'">{{ dataToView.expectedFinTime ? dataToView.expectedFinTime.substr(0,10) : '' }}</div>
                  <DatePicker v-else class="w" placeholder="" v-model='dataToView.expectedFinTime' placement="top-start" disabled></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='投资金额（万元）：' prop='investmentMoney'>
                  <div v-if="mode === 'view'">{{ dataToView.investmentMoney }}</div>
                  <InputNumber v-else class='w' placeholder="请填写投资金额（万元）" :min="0" type='text'
                               v-model='dataToView.investmentMoney'></InputNumber>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='完成时间：' prop='finTime'>
                  <div v-if="mode === 'view'">{{ dataToView.finTime ? dataToView.finTime.substr(0, 10) : '' }}</div>
                  <DatePicker v-else class="w" placeholder="请选择完成时间" v-model='dataToView.finTime' placement="top-start"
                              :options="options"></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='效果评价：' prop='effect'>
                  <div v-if="mode === 'view'">{{ dataToView.effect }}</div>
                  <Input v-else class='w' placeholder="请填写效果" type='text' v-model='dataToView.effect'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填表人：' prop='registrant'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='联系电话：' prop='creatorPhone'>
                  <div v-if="mode === 'view'">{{ dataToView.creatorPhone }}</div>
                  <Input v-else type='text' v-model='dataToView.creatorPhone'></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='填表时间：' prop='registTime'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el"
                              v-model='dataToView.createDate' readonly></DatePicker>
                </FormItem>
              </Col>
            </Row>

          </Form>
          <Modal title="环保投入计划" :transfer=false footer-hide v-model="modelSelect" :width=900>
            <rpt-investment-plan v-if="modelSelect" v-show="modelSelect" :modelSelect="modelSelect"
               @getSelectModelData='getSelectModelData' :companyId="dataToView.companyId"
                 :year="dataToView.rptPeroid" :projectCategory="dataToView.projectCategory"></rpt-investment-plan>
            <div slot="footer">
              <Button class='ivu-btn-save' @click="modelSelect=false">关闭</Button>
            </div>
          </Modal>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import rptInvestmentPlan from './RptInvestmentPlan'
var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  name: "auditForm",
  components: {
    cascaderDom, rptInvestmentPlan
  },
  data() {
    return {
      ...this.createCommonDataField(),
        statisticPage: true,
        columns2: [
            {title: '序号', width: 65, fixed: 'left', align: 'center', render: this.indexColumnsRender},
            {key: 'companyName', title: '企业名称', align: 'center', minWidth: 200},
            {key: 'str', title: '项目个数', align: 'center', minWidth: 160, tooltip:true},
            {key: 'belongOrgName', title: '二级集团', align: 'center', minWidth: 150},
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 80,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('A', {
                            props: {type: 'primary', size: 'small'},
                            style: {
                                fontSize: '14px',
                            },
                            on: {
                                click: () => {
                                    this.statisticPage = false
                                    this.dataToQuery.companyName = params.row.companyName
                                    this.dataToQuery.companyId = params.row.companyId
                                    // this.dataToQuery.belongOrgId = params.row.belongOrgId
                                    // this.dataToQuery.belongOrgName = params.row.belongOrgName
                                    this.query()
                                }
                            }
                        }, '详情'),
                    ])
                }
            }
        ],
      columns1: [
        // { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {
          title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
            if (params.row.id === '-1') return h('span', "汇总");
            return h('span', (params.index - 1) + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {key: 'companyName', title: '单位名称', fixed: 'left', align: 'center', minWidth: 200},
        {key: 'rptPeroid', title: '年度', fixed: 'left', align: 'center', minWidth: 80},
        {
          key: 'projectCategory', title: '项目类型', align: 'center', minWidth: 140, render: (h, params) => {
            return h('span', (this.dictMap['EI-000001'] && this.dictMap['EI-000001'][params.row.projectCategory] && this.dictMap['EI-000001'][params.row.projectCategory].codingName))
          }
        },
          {key: 'isPlan', title: '是否计划内', align: 'center', minWidth: 80},
        {key: 'projectName', title: '项目名称', align: 'center', minWidth: 140},
        {key: 'content', title: '项目基本内容', align: 'center', minWidth: 160, tooltip: true},
        {key: 'investmentMoney', title: '投资金额（万元）', align: 'center', minWidth: 140},
        {key: 'finTime', title: '完成时间', align: 'center', render: this.renderCellDate, minWidth: 100},
        {key: 'effect', title: '效果评价', align: 'center', minWidth: 120, tooltip: true},
        {key: 'createUserName', title: '填表人', align: 'center', width: 140},
        {key: 'creatorPhone', title: '联系电话', align: 'center', width: 140},
        {key: 'createDate', title: '填表时间', align: 'center', width: 120, render: this.renderCellDate},
        // this.getActionColumns()
        this.getActionColumns((params) => {
          return params.row.id === '-1';
        })
      ],
      ruleCustom: {
        companyId: [{required: true, message: '请填写企业名称', trigger: 'change'}],
        projectCategory: [{required: true, message: '请填写项目分类', trigger: 'change'}],
          rptPeroid: [{required: true, message: '请填写项目分类', trigger: 'change',}],
        projectName: [{required: true, message: '请填写项目分类', trigger: 'change'}],
        creatorPhone: [{
          pattern: /^((0\d{2,3}-\d{7,8})|(1[123456789]\d{9}))$/,
          required: true,
          message: '请填写联系电话',
          trigger: 'change'
        }],
      },
      tableHeight: 10,
      dictMap: {},
      // api
      queryUrl: Api.queryEnRptInvestment,
      exportUrl: Api.exportEnRptInvestment,
      deleteUrl: Api.deleteEnRptInvestment,
      bthDeleteUrl: Api.batchDeleteEnRptInvestment,
      getUrl: Api.getEnRptInvestment,
      updateUrl: Api.updateEnRptInvestment,
      saveUrl: Api.saveEnRptInvestment,
      options: {
        disabledDate(date) {
          return date && date.valueOf() > new Date();
        }
      },
        twoLevel:[],

        modelSelect: false
    }
  },
  async mounted() {
    await this.$http.get(Api.queryDictBycode + "EI-000001", {}).then((res) => {
      // 数据字典 list 转 map，方便调用
      this.dictMap = {
        'EI-000001': this.dictListToMap(res.data.data['EI-000001'])
      }
    }).catch(e => {
      this.$Message.error("数据字典获取失败")
    });
      this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
          this.twoLevel=res.data.data
      })
    this.tableHeight = window.innerHeight - 325
    this.query();
  },
  methods: {
    ...pageCommonFunction,
      onFocus(){
          if (this.dataToView.companyId && this.dataToView.projectCategory) {
              this.modelSelect = true;
          } else {
              this.$Message.error("单位名称、项目类型不能为空")
          }
      },
      getSelectModelData(row) {
          this.dataToView.planId = row.id;
          this.dataToView.projectName = row.projectName;
          this.dataToView.content = row.content;
          this.dataToView.investmentMoneyPlan = row.investmentMoney;
          this.dataToView.expectedFinTime = row.expectedFinTime;
          this.modelSelect = false;
      },
      belongChange(value) {
          this.dataToQuery.belongOrgId = value.value
          this.dataToQuery.belongOrgName = value.label
      },
    deleteData(params) {
      this.deleteDateAjax(params);
    },
      exportForm(){
          if(this.dataToQuery.yearDate && this.dataToQuery.belongOrgId) {
              this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
              if(this.dataToQuery.projectCateArrays) {
                  this.dataToQuery.projectCategories = this.arrayToInFormat(this.dataToQuery.projectCateArrays)
              }
              this.exportFormSubmit()
          } else {
              this.$Message.error("导出时候二级集团和年份必选")
          }
      },
      goback(){
          this.statisticPage = true
          this.dataToQuery = {}
          this.query()
      },
    query() {
        this.queryUrl = this.statisticPage?Api.queryEnRptInvestment+'/page':Api.queryEnRptInvestment
      if (this.dataToQuery.projectCateArrays) {
        this.dataToQuery.projectCategories = this.arrayToInFormat(this.dataToQuery.projectCateArrays)
      }
      if (this.dataToQuery.yearDate) {
        this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
      }
      this.queryAjax();
    },
    submit(name) {
      // if (this.dataToView.rptPeroidDate) {
      //   this.dataToView.rptPeroid = this.dataToView.rptPeroidDate.getFullYear();
      // }
      this.submitAjax(name);
    },
    beforeEditDialogOpen(data) {
      // data.row.rptPeroidDate = new Date(data.row.rptPeroid + '-01-01');
    },
    createEmptyDataToAdd() {
      return {
        investmentMoney: null,
        creatorPhone: this.currentUser.mobileNumber,
          isPlan: '计划内',
          rptPeroid: new Date().getFullYear().toString()
      }
    }
  },
  watch: {},

}
</script>

<style lang='css' scoped>

</style>
